/**
入参menu，父组件传递menu来子组件，红线不用管是Elinst的格式问题
数据结构(父组件传过来的值)
 menu: [
        {
        title: '分类',
        url: '123',
        divided: true,（是否显示分割线，分割线一般位于该标题上头,不写默认为false）
        childer: [
        {
            title: '分类1',
            url: '1111',
            methods: this.a (父组件中的方法)
        },
        {
            title: '分类2',
            url: '2222',
            methods: this.b,
            constant:''(传递的一个常量，当需要传递多个参数时，使用集合的形式传递 => constant: { param1: '', param2: ''}),
            type: 'file', (可选参数，当需要导出文件时使用，方法返回三个参数，参考el-upload的使用)
            accept: '' (可选参数，导出文件时，限制文件导出类型)
        }
      ]
*/
<template>
  <div :class="['menu-div', 'menu-' + menuType]">
    <el-dropdown trigger="click" :hide-on-click="true">
      <el-button>
        <svg-icon :icon-class="iconClass" class-name="icon-svg" />
        <span>{{ text }}</span>
        <i class="el-icon-arrow-down" />
      </el-button>
      <el-dropdown-menu
        slot="dropdown"
        style="width: 130px; font-size: 20px; text-align: center"
      >
        <template v-for="item in menu">
          <el-dropdown-item
            v-if="!item.childer && !item.type"
            :key="item.url"
            :divided="item.divided"
            @click.native="item.methods(item.constant)"
          >{{ item.title }}</el-dropdown-item>
          <el-dropdown-item
            v-else-if="!item.childer && item.type === 'file'"
            :key="item.url"
            :divided="item.divided"
          >
            <el-upload
              :action="Global.BASEURL"
              :accept="item.accept"
              :show-file-list="showFileList"
              :on-success="item.methods"
            >{{ item.title }}</el-upload>
          </el-dropdown-item>
          <el-dropdown-item
            v-else
            :key="item.url"
            style="width: 120px; font-size: 20px"
            :divided="item.divided"
          >
            <el-dropdown trigger="hover" placement="right-start" style=" font-size: 12px;margin-right:-27px">
              <span class="el-dropdown-link">
                {{ item.title }}
                <i class="el-icon-arrow-down el-icon-arrow-right" />
              </span>
              <!-- 二级嵌套 -->
              <el-dropdown-menu
                slot="dropdown"
                style="width: 170px; margin-left: 20px; text-align: center"
              >
                <template v-for="items in item.childer">
                  <el-dropdown-item
                    :key="items.title"
                    :divided="items.divided"
                    @click.native="items.methods(items.constant)"
                  >{{ items.title }}</el-dropdown-item>
                  <el-dropdown-item
                    v-if="items.type === 'file'"
                    :key="items.title"
                    :divided="items.divided"
                  >
                    <el-upload
                      :action="Global.BASEURL"
                      :accept="items.accept"
                      :show-file-list="showFileList"
                      :on-success="items.methods"
                    >{{ items.title }}</el-upload>
                  </el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    menu: {
      type: Array
    },
    iconClass: {
      type: String,
      default: 'yingyong'
    },
    text: {
      type: String,
      default: ''
    },
    // 当前显示菜单的模式、默认是给树用的
    menuType: {
      type: String,
      default: 'tree'
    }
  },
  data() {
    return {
      showFileList: false
    }
  }
}
</script>
<style lang="scss" scope>
</style>
